<template>
  <view>
    <view class="b-head">
      <swiper
        class="swiper"
        :indicator-dots="arrPic && arrPic.length>=2"
        :autoplay="true"
      >
        <swiper-item
          v-for="(item,index) in arrPic?arrPic:['../../static/sp.png']"
          :key="index"
        >
          <image :src="item"></image>
        </swiper-item>
      </swiper>
      <view class="b-head__msg">
        <view class="b-head__title">
          {{goodsDetail.title}}
        </view>
        <view class="b-head__price">
          <text class="text1">参考价：ARS$</text>
          <text class="text2">{{goodsDetail.price}}</text>
        </view>
        <view class="b-head__hot">
          <text>收藏 {{goodsDetail.collection}}</text>
          <text>浏览 {{goodsDetail.browse}}</text>
          <text>库存 {{goodsDetail.stock}}</text>
        </view>
      </view>

    </view>
    <view class="b-city">
      <text>-- 图文详细 --</text>
    </view>
    <view class="b-fwb">
      <view class="b-fwb__desc">{{goodsDetail.goodsDetail}}</view>
      <image
        :src="'https://expay-mall.s3-sa-east-1.amazonaws.com'+ pic"
        v-for="(pic,index) in goodsDetail.detailPics"
        :key="index"
      ></image>
    </view>
    <view class="b-handle">
      <view
        class="b-handle__item"
        @tap="handleGoods('lower')"
        v-if="state == 2"
      >下架</view>
      <view
        v-if="state == 3"
        class="b-handle__item"
        @tap="handleGoods('upper')"
      >上架</view>
      <view
        class="b-handle__item"
        @tap="handleGoods('remove')"
      >删除</view>
      <view
        class="b-handle__item"
        @tap="handleRedact(goodsDetail)"
      >编辑
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(opt) {
    this.goodsId = opt.goodsId
    this.state = opt.state
    this.getGoodsDetail()
  },
  data() {
    return {
      goodsDetail: {},
      goodsId: '',
      state: '',
      ticketId: '',
      goodsDetail: {},
    }
  },
  computed: {
    arrPic() {
      if (this.goodsDetail.proRotaPic) {
        let showImgs = this.goodsDetail.proRotaPic.split(',')
        let res = showImgs.map(item => {
          return item = 'https://expay-mall.s3-sa-east-1.amazonaws.com' + item
        })
        return res
      }
    }
  },
  methods: {
    async getGoodsDetail() {
      let res = await this.$http.GET({
        url: '/seller/goods',
        data: {
          goodsId: this.goodsId
        }
      })
      if (res.code == 200) {
        console.log(res.data)
        this.goodsDetail = res.data
      }
    },
    async handleGoods(type) {
      const url = type == 'lower' ? '/seller/goods/lower' : type == 'upper' ? '/seller/goods/upper' : '/seller/goods/remove'
      uni.showModal({
        title: '提示',
        content: `${type == 'lower' ? '是否下架该商品' : type == 'upper' ? '是否上架该商品' : '是否删除该商品'}`,
        success: async res => {
          if (res.confirm) {
            uni.showLoading({ title: '加载中', mask: true });
            let res = await this.$http.POST({
              url,
              data: {
                goodsIds: this.goodsDetail.goodsId
              }
            })
            uni.hideLoading()
            if (res.code == 200) {
              uni.showToast({ title: `成功${type == 'lower' ? '下架' : type == 'upper' ? '上架' : '删除'}该商品` })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 2
                })
              }, 1000);

            } else {
              uni.showToast({ title: res.msg, icon: 'none' });
            }
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },

    handleRedact(detail) {
      uni.navigateTo({
        url: `/pages/IssueGoods/index?detail=${JSON.stringify(detail)}`
      });
    }
  },

}
</script>

<style lang="scss" scoped>
@import '@/scss';
@include b(head) {
  width: 100%;
  background: #fff;
  .swiper {
    height: 450upx;
  }
  image {
    @include size(100%, 100%);
  }
  @include e(msg) {
    padding: 0 30upx;
  }
  @include e(title) {
    font-size: 32upx;
    padding-top: 20upx;
  }
  @include e(price) {
    padding-top: 30upx;
    color: #ff0000;
    .text1 {
      font-size: 30upx;
    }
    .text2 {
      font-size: 48upx;
      padding-left: 8upx;
    }
  }
  @include e(hot) {
    color: #808080;
    @include flex-bw;
    padding: 20upx 0;
    font-size: 24upx;
  }
}
@include b(city) {
  margin-top: 16upx;
  background: #fff;
  height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
  color: #333;
  text-align: center;
  border-bottom: 1px solid #eee;
  .modify {
    padding: 0 10upx;
  }
}
@include b(fwb) {
  min-height: 300upx;
  padding: 30upx;
  margin-bottom: 180upx;
  background: #fff;
  @include e(desc) {
    text-align: center;
  }
  image {
    margin-top: 30upx;
  }
}
@include b(handle) {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid rgb(169, 203, 255);
  @include e(item) {
    @include flex-center;
    @include size(33.3%, 98upx);
    color: #4d91f9;
    border-right: 1px solid rgb(169, 203, 255);
    &:nth-last-child(1) {
      background: #4d91f9;
      color: #fff;
      border: 0;
    }
  }
}
</style>